<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多个动画一起启动</title>
    <!-- <script src="../dist/anikyu.js"></script> -->
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            background-color: #fff;
        }

        .wrap {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            width: 500px;
            height: 500px;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
        }

        .wrap>div {
            flex-shrink: 0;
            width: 20%;
            height: 20%;
            transform: scale(0);
            mix-blend-mode: multiply;
        }

        .wrap>div:nth-child(even) {
            background-color: #06f;
        }

        .wrap>div:nth-child(odd) {
            background-color: #0Af;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <script type="module">
        import Anikyu from '../src/anikyu.js';

        var els = document.querySelector('.wrap').children

        var obj = {
        }
        window.anis = []
        for (var i = 0; i < els.length; i++) {
            (function (i) {
                setTimeout(function () {
                    var ani = new Anikyu(obj, [
                        {
                            props: {
                                s: 0,
                                t: 0
                            }
                        },
                        {
                            duration: 700,
                            props: {
                                s: 1,
                                br: 50,
                                t: 0
                            }
                        },
                        {
                            duration: 700,
                            props: {
                                s: 0,
                                br: 50,
                                t: 0
                            }
                        },
                        {
                            delay: 200,
                            duration: 700,
                            props: {
                                s: Math.random(),
                                br: 50,
                                t: 0
                            }
                        },
                        {
                            delay: 400,
                            duration: 700,
                            props: {
                                s: Math.random(),
                                br: 50,
                                t: 0
                            }
                        },
                        {
                            easeType: 'circularOut',
                            duration: 1000,
                            props: {
                                s: Math.cos(i / 2 * Math.PI) + 0.2,
                                t: 0
                            }
                        },
                        {
                            easeType: 'circularOut',
                            duration: 1000,
                            props: {
                                s: Math.sin(i / 2 * Math.PI) + 0.2,
                                t: 0
                            }
                        },
                        {
                            duration: 1000,
                            easeType: 'elasticInOut',
                            props: {
                                s: Math.random(),
                                t: Anikyu.rand(60, 100) * (Anikyu.rand(-1, 1) > 0 ? 1 : -1),
                            }
                        },
                        {
                            duration: 1200,
                            easeType: 'elasticInOut',
                            props: {
                                s: Math.random(),
                                t: Anikyu.rand(30, 60) * (Anikyu.rand(-1, 1) > 0 ? 1 : -1),
                            }
                        },
                        {
                            name: 'final',
                            easeType: 'bounceOut',
                            duration: 800,
                            props: {
                                s: 0,
                                t: Anikyu.rand(100, 200) * (Anikyu.rand(-1, 1) > 0 ? 1 : -1),
                            }
                        }
                    ])
                    ani.addEventListener('animate', function (e) {
                        // if (e.detail.name) {
                        //     console.log(e.detail.newValue)
                        // }
                        let scaleS = `scale(${e.detail.value.s}) `;
                        let translateS = ''

                        if (e.detail.value.t !== undefined) {
                            translateS = `translate(${e.detail.value.t}px,${e.detail.value.t}px)`

                            // console.log(e.detail.value.t)
                        }
                        els[i].style.transform = scaleS + (isNaN(e.detail.value.t) ? '' : translateS)

                        if (e.detail.value.o !== undefined) {
                            els[i].style.opacity = e.detail.value.o
                        }


                        let radiusObj = {
                            borderRadius: 50 + '%'
                        }

                        if (e.detail.value.br !== undefined) {
                            radiusObj = {
                                borderRadius: e.detail.value.br + '%'
                            }
                        }

                        Object.assign(els[i].style, radiusObj)
                        // console.log(e.detail.value, e.target)
                    })
                    ani.addEventListener('finish', function (e) {
                        console.log(e.detail.stageIndex)
                        if (e.detail.name === 'final') {
                            // 若在结束时调用则需要传入 true
                            ani.jump(1, true)
                        }
                    })
                    anis.push(ani)
                }, i * 20)
            })(i)
        }
    </script>
</body>

</html>